import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(MaterialApp(home: TextHomePage()));
}

class TextHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return TextHomePageState();
  }
}

class TextHomePageState extends State {
  int? selectedValue;

  @override
  Widget build(BuildContext context) {
    /**
     * GridView
     *
     *
     * Padding(
        padding: EdgeInsets.symmetric(horizontal: 20),  //针对网格布局的时候左右没有间距的解决方案
        child: GridView(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4 ,//设置每行的显示个数
        crossAxisSpacing: 8, //设置交叉轴间距
        childAspectRatio: 1,//设置主轴间距
        mainAxisSpacing: 8 //设置行高
        ),
        children: List.generate(100, (index) {
        return Container(
        color: Colors.purple,
        child: Center(
        child: Text("data"),
        )
        );
        }),
        ),
        )

     * Gridview.count()
     * Gridview.extent()
     * GridView.builder()
     *
     * GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4,
        mainAxisSpacing: 2,
        crossAxisSpacing: 3
        ),
        itemBuilder: (BuildContext context,int index){
        return Container(
        color: Colors.purple,
        );
        }
        )
     *
     * sliver
     *
     *
     *
     * 滚动的监听
     */
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("listview"),
          ),
          body: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),  //针对网格布局的时候左右没有间距的解决方案
              child: GridView.builder(
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 4,
                      mainAxisSpacing: 2,
                      crossAxisSpacing: 3
                  ),
                  itemBuilder: (BuildContext context,int index){
                    return Container(
                      color: Colors.purple,
                    );
                  }
              )
          )
      ),
    );
  }
}
